Component({
  properties: {
    label: String,
    progress: Number,
    active: false,
    size: {
      type: Number,
      value: 80
    }
  },
  lifetimes: {
    ready() {
      this.draw();
    }
  },
  methods: {
    draw() {
      const query = this.createSelectorQuery();
      query.select('#progress')
        .fields({ node: true, size: true })
        .exec(res => {
          const canvas = res?.[0].node;
          
          const ctx = canvas.getContext('2d');
          const dpr = wx.getWindowInfo().pixelRatio;
          const width = res[0].width;
          const height = res[0].height;

          canvas.width = width * dpr;
          canvas.height = height * dpr;
          ctx.scale(dpr, dpr);

          const r = width / 2;
          const lineWidth = 6;
          const startAngle = -Math.PI / 2;
          const endAngle = startAngle + 2 * Math.PI * this.data.progress;

          ctx.lineWidth = lineWidth;
          ctx.lineCap = 'round';

          // background
          ctx.beginPath();
          ctx.strokeStyle = '#CFEDE5';
          ctx.arc(r, r, r - lineWidth / 2, 0, 2 * Math.PI);
          ctx.stroke();

          // foreground
          if (this.data.progress > 0) {
            ctx.beginPath();
            ctx.strokeStyle = '#1AA37D';
            ctx.arc(r, r, r - lineWidth / 2, startAngle, endAngle);
            ctx.stroke();
          }
        });
    }
  }
});
